<template>
  <el-input v-model="input" placeholder="输入你要查看的学生姓名" />
  <el-button type="warning" @click="selFn">查询</el-button>
  <div class="wrap">
    <div ref="myCan" id="canvas" style="width: 800px; height: 500px"></div>
    <div id="info">
      <p>建议：{{ suggest }}</p>
    </div>
  </div>
</template>

<script setup>
// 使用图表展示查询到的学生信息
import dataObj from '@/data/index.json'
import { ref } from 'vue'
const input = ref('')
const myCan = ref(null)
const suggest = ref('') // 老师的建议
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 查询方法
const selFn = () => {
  const target = dataObj['学生成绩'][input.value]
  if (!target) ElMessage.error('未查到学生')
  else {
    suggest.value = target.suggest
    // 数据结构转换
    const indicator = []
    dataObj['列描述'].forEach((str, index) => {
      indicator.push({
        name: str,
        min: 0,
        max: dataObj['最大值'][index]
      })
    })
    const echartsObj = echarts.init(myCan.value)

    echartsObj.setOption({
      title: {
        text: '个人能力维度分析'
      },
      legend: {
        data: ['个人得分', '班级平均水平']
      },
      radar: {
        indicator: indicator
      },
      series: [
        {
          name: '个人得分',
          type: 'radar',
          data: [
            {
              value: target.list,
              name: '个人得分'
            },
            {
              value: dataObj['平均分'],
              name: '班级平均水平'
            }
          ]
        }
      ]
    })
  }
}
</script>

<style scoped>
.wrap {
  display: flex;
}
</style>